.select-place-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $clr-white;
  transform: translateX(100%);
  transition: all .3s;
  &.show {
    transform: translateX(0);
  }
  .search-bar-outer {
    height: px(60);
    .search-bar {
      padding: px(16) px(8);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9;
      background-color: $clr-bg;
    }
  }
  input {
    width: 100%;
    height: px(28);
    text-align: center;
    padding: px(0) px(26);
    display: block;
    background-color: $clr-white;
    border: none;
    border-radius: px(28);
  }
  svg {
    font-size: px(18);
    color: $clr-g6;
    position: absolute;
    left: px(104);
    top: px(1);
    bottom: px(1);
    margin: auto;
  }
  .nav-box {
    position: relative;
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      border-top: px(1) solid #eee;
      transform: scaleY(.5);
    }
  }
  .hotplace-content-title {
    color: $clr-g3;
    font-size: px(14);
    padding: px(20) px(16) 0;
    margin: px(0) px(0) px(8);
  }
  .hotplace-content-info {
    padding: 0 px(16);
    overflow: hidden;
    .hotplace-list {
      overflow: hidden;
      padding-bottom: px(12);
      .hotplace-item {
        padding-bottom: px(8);
      }
    }
    .hotplace-item {
      width: 25%;
      float: left;
      padding: px(0) px(4);
      span {
        position: relative;
        display: block;
        width: 100%;
        height: px(32);
        line-height: px(30);
        text-align: center;
        border-radius: px(32);
        border: px(1) solid $clr-bg;
        background-color: $clr-bg;
        padding: px(0) px(6);
        @include ellipsis();
      }
      &.on {
        span {
          border: px(1) solid $clr-main;
          background-color: $clr-main;
        }
      }
    }
  }
  .place-list {
    .place-list-box {
      p {
        height: px(36);
        line-height: px(36);
        padding: px(0) px(16);
        background-color: #f5f5f5;
        font-size: px(14);
        color: $clr-g9;
      }
      ul {
        padding: px(0) px(0) px(0) px(16);
        li {
          height: px(44);
          line-height: px(44);
          color: $clr-g3;
          font-size: px(14);
          position: relative;
          &:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
            border-top: px(1) solid #eee;
            transform: scaleY(.5);
          }
          &.on {
            color: $clr-main;
          }
        }
        &>:last-child {
          &:after {
            opacity: 0;
          }
        }
      }
    }
  }
  .place-index {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 9;
    ul {
      li {
        color: $clr-active;
        font-size: px(14);
        text-align: center;
        padding: px(0) px(4) px(0) px(10);
      }
    }
  }
}